<template>
	<view class="content">
		<!-- 头部内容 -->
		<view class="vote-top">
			<h3>周笔畅 2019LUNAR巡回演唱会 上海周笔畅 2019LUNAR巡回演唱会 上海</h3>
			<p><uni-icons custom-prefix="custom-icon" type="more-filled" size="30"></uni-icons></p>
		</view>
		<!-- 主体内容 -->
		<view class="vote-center">
			<view class="vote-center-changci">
				<view class="changci">
					<h3>场次</h3>
					<p>场次时间均为演出当地时间</p>
				</view>
				<uni-data-checkbox mode="tag" selectedColor="#ffeaf0" selectedTextColor="#fb3777" v-model="session_xuanze"
					:localdata="session"></uni-data-checkbox>
			</view>
			<view class="vote-center-piaomian">
				<h3>票面</h3>
				<uni-data-checkbox mode="tag" selectedColor="#ffeaf0" selectedTextColor="#fb3777" v-model="session_xuanze2"
					:localdata="session2"></uni-data-checkbox>
			</view>
			<view class="vote-center-piaomian">
				<h3>取票方式</h3>
				<uni-data-checkbox mode="tag" selectedColor="#ffeaf0" selectedTextColor="#fb3777" v-model="session_xuanze3"
					:localdata="session3"></uni-data-checkbox>
			</view>
		</view>
		<!-- 底部内容 -->
		<view class="vote-bottom">
			<view class="vote-bottom-shuliang">
				<h4>购买数量</h4>
				<uni-number-box @change="changeValue" />
			</view>
			<view class="vote-bottom-xiangqing">
				<h5>每笔订单限购6张</h5>
				<p>同一订单3张及以内保证连座</p>
			</view>
			<view class="vote-bottom-heji">
				<view class="heji-left">
					<p>合计</p>
					<view class="heji">
						<p>540元</p>
						<span>540元/张</span>
					</view>
				</view>
				<view class="heji-right">
					<button @click="onChanges">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				session: [{
					text: '2019-12-28 周六 19:00',
					value: 0
				}],
				session2: [{
						text: '280票面 看台',
						value: 0
					},
					{
						text: '480票面 看台',
						value: 1
					},
					{
						text: '680票面 看台',
						value: 2
					},
					{
						text: '880票面 看台',
						value: 3
					},
					{
						text: '1280票面 内场',
						value: 4
					}
				],
				session3: [{
						text: '极速发货 48小时内发货',
						value: 0
					},
					{
						text: '普通快递 演出前5天发货',
						value: 1
					},
					{
						text: '现场取票 当天开演前取票',
						value: 2
					}
				],
				session_xuanze: [],
				session_xuanze2: [],
				session_xuanze3: [],
				// 底部
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
			}
		},
		methods: {
			changeValue(value) {
				console.log('返回数值：', value);
			},
			//跳转订单页面
			onChanges(){
				uni.navigateTo({
					url:"/pages/OrderModule/order"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;

		// 头部内容
		.vote-top {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #f9f9f9;

			h3 {
				// width: 500rpx;
				padding: 0 30rpx;
				margin-left: 20rpx;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				// text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				// box-sizing: border-box;
				// word-break: break-all;
			}

			p {
				margin-right: 40rpx;
			}
		}

		// 主体样式
		.vote-center {
			width: 100%;
			padding: 0 20rpx;
			// background-color: blueviolet;

			.vote-center-changci {
				.changci {
					padding-top: 20rpx;
					display: flex;

					p {
						margin-left: 10rpx;
						font-size: 20rpx;
						color: #a699a6;
						margin-top: 14rpx;
					}
				}
			}

			.vote-center-piaomian {
				h3 {
					margin: 10rpx 0;
				}
			}
		}

		.vote-bottom {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			height: 270rpx;
			// background-color: brown;
			padding: 0 20rpx;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;

			box-shadow: 4px 4px 15px #7d7d7d;

			.vote-bottom-shuliang {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
			}

			.vote-bottom-xiangqing {
				display: flex;
				justify-content: space-between;
				height: 40rpx;
				line-height: 40rpx;
				margin-top: 16rpx;
				border-bottom: 1px solid #f3f3f3;
				padding-bottom: 20rpx;

				h5 {
					color: #999999;
					font-size: 28rpx;
				}

				p {
					color: #ffbe91;
					font-size: 28rpx;
				}
			}

			.vote-bottom-heji {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.heji-left {
					display: flex;

					p {
						color: #9fa19f;
						font-size: 26rpx;
						margin-top: 10rpx;
						margin-right: 20rpx;
					}

					.heji {
						p {
							color: #fb3777;
							font-weight: bold;
							font-size: 30rpx;
						}

						span {
							color: #9fa1a3;
							font-size: 24rpx;
						}
					}
				}

				.heji-right {
					button {
						background-color: #fb3777;
						color: #ffffff;
						border-radius: 40rpx;
						padding: 0 120rpx;
					}
				}
			}
		}
	}
</style>